<template>
  <MainView :page-title="pageTitle">
    <el-container class="index-view" direction="horizontal">
      <el-aside
        class="app-height"
        width="150px"
        style="-webkit-app-region: drag"
      >
        <el-scrollbar class="app-scroll__area">
          <el-menu
            :default-active="defaultIndex"
            class="no-drag"
            router
            style="overflow: hidden"
          >
            <el-menu-item index="/" :route="{ path: '/' }">
              <i class="el-icon-s-home"></i>
              <span slot="title">主页</span>
            </el-menu-item>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-postcard"></i>
                <span>我的面板</span>
              </template>
              <el-menu-item index="/self/info" :route="{ path: '/self/info' }">
                个人信息
              </el-menu-item>
              <el-menu-item
                index="/self/modify"
                :route="{ path: '/self/modify' }"
              >
                修改密码
              </el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span slot="title">内容管理</span>
              </template>
              <el-menu-item
                index="/document/module"
                :route="{ path: '/document/module' }"
              >
                列表筛选
              </el-menu-item>
              <el-menu-item
                index="/document/create"
                :route="{ path: '/document/create' }"
              >
                文档创建
              </el-menu-item>
              <el-menu-item
                index="/document/tools"
                :route="{ path: '/document/tools' }"
              >
                网站工具
              </el-menu-item>
              <el-menu-item
                index="/document/view"
                :route="{ path: '/document/view' }"
              >
                PDF预览
              </el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span slot="title">系统工具</span>
              </template>
              <el-menu-item
                index="/tool/module"
                :route="{ path: '/tool/pull' }"
              >
                git更新
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-main class="app-height">
        <el-scrollbar class="app-scroll__area app-main__area">
          <!-- <keep-alive><router-view /></keep-alive> -->
          <router-view />
        </el-scrollbar>
      </el-main>
    </el-container>
  </MainView>
</template>
<script>
import MainView from "@/components/MainView";
export default {
  components: {
    MainView,
  },
  computed: {
    defaultIndex() {
      return this.$route.fullPath;
    },
    pageTitle() {
      return this.$route.meta.title;
    },
  },
};
</script>

<style lang="scss" scoped>
.index-view {
  width: 100%;
  height: 100%;
  .app-height {
    position: relative;
    .app-scroll__area {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      .no-drag {
        user-select: none;
        -webkit-app-region: no-drag;
      }
      /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;
      }
      &.app-main__area {
        /deep/ .el-scrollbar__view {
          padding: 20px;
          box-sizing: border-box;
          width: 100%;
          min-height: 100%;
        }
      }
    }
  }
}
</style>
